<!--
	作者：offline
	时间：2019-03-04
	描述：动态对话框元素
-->

<template>
    <div class="dynamicForm">
        <el-form ref='ruleForm' :model="ruleForm" label-width="100px" :inline-message="true">
            <div  v-for="(formItem, index) in ruleForm.formList" :key="index" v-show="formItem.show">
                <el-form-item :show-message="!formItem.hiddenMsg" :rules="formItem.disabled?[]:formItem.rules" :label="formItem.label" :prop=" 'formList.' + index + '.model' ">
                    <!--输入框 type：默认为text，如果需要转换为文本域需要传入textarea-->
                    <el-input 
                        v-if="formItem.itemType === 'input'" 
                        :type="formItem.type" 
                        :maxlength="formItem.maxlength" 
                        :minlength="formItem.minlength" 
                        v-model.trim="formItem.model"
                        :placeholder="formItem.placeholder"
                        :disabled="formItem.disabled"
                        :readonly="formItem.readonly"
                        :rows="formItem.rows"
                        :resize="formItem.resize"
                        :clearable="formItem.clearable"
                        @click="typeof formItem.click === 'function' ? formItem.click($event): function(){}"
                        @blur="typeof formItem.blur === 'function' ? formItem.blur($event) : function(){}"
                        @change="typeof formItem.change === 'function' ? formItem.change($event) : function(){}">
                        <el-button v-if="formItem.buttonVisible" slot="append" icon="el-icon-search" @click="typeof formItem.click === 'function' ? formItem.click($event) : function(){}"></el-button>
                    </el-input>
                    <!--下拉选项-->
                    <el-select
                        v-if="formItem.itemType === 'select'"
                        :multiple="formItem.multiple"
                        :multiple-limit="formItem.multipleLimit"
                        :clearable="formItem.clearable"
                        :placeholder="formItem.placeholder"
                        :size="formItem.size"
                        :disabled="formItem.disabled"
                        v-model="formItem.model"
                        @change="selectChange.call(null,formItem.change,$event)"
                        @visible-change="typeof formItem.visibleChange === 'function' ? formItem.visibleChange($event) : function(){}"
                        @remove-tag="typeof formItem.removeTag === 'function' ? formItem.removeTag($event) : function(){}">
                        <el-option 
                            v-for="item in formItem.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                    <!--单选框 size: Radio 的尺寸，仅在 border 为真时有效；fill:	按钮形式的 Radio 激活时的填充色和边框色(有默认值)；text-color   按钮形式的 Radio 激活时的文本颜色(有默认值)-->
                    <el-radio-group
                        v-if="formItem.itemType === 'radioGroup'"
                        v-model="formItem.model"
                        :disabled="formItem.disabled"
                        :size="formItem.size"
                        :fill="formItem.fill"
                        :text-color="formItem.textColor"
                        @change="typeof formItem.change === 'function' ? formItem.change($event) : function(){}">
                        <el-radio :disabled="radio.disabled" v-for="(radio,index) in formItem.radios" :key="index" :label="radio.value">{{radio.label}}</el-radio>
                    </el-radio-group>
                    <!--多选框组-->
                    <el-checkbox-group
                        v-if="formItem.itemType === 'checkboxGroup'"
                        v-model="formItem.model"
                        :size="formItem.size"
                        :fill="formItem.fill"
                        :text-color="formItem.textColor"
                        @change="typeof formItem.change === 'function' ? formItem.change($event) : function(){}">
                        <el-checkbox
                            v-for="(checkbox,index) in formItem.chekcboxs"
                            :checked="checkbox.checked"
                            :disabled="checkbox.disabled"
                            :key="index"
                            :label="checkbox.label">{{checkbox.label}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
            <!-- <el-row  class="dialog-footer">
                <el-button @click="cancel" :disabled.sync="disState">取消</el-button>
            </el-row> -->
        </el-form>        
    </div>
</template>

<script>
    export default {
        inheritAttrs:true,
        data(){
            return{
                disState:false,
                refForm:{},
                ruleForm:{
                    formList:this.formList
                }
            }
        },
        mounted(){
            this.setAuth();
            this.refForm = this.$refs['ruleForm'];        
        },
        props:{
            formList:Array,
            cancelComponent:Boolean,
            getFormData:Boolean
        },
        watch:{
            formList(value){
                this.ruleForm.formList = value;
                this.turnData(this.ruleForm.formList);
            },
            cancelComponent:{
                handler(newValue,oldValue){
                    if(newValue){
                        this.$refs.ruleForm.resetFields();
                        this.$emit('cancelComponent',true);
                    }
                }
            },
            getFormData:{
                handler(newValue,oldValue){
                    if(newValue)
                        this.clickSubmit();
                }
            }
        },
        methods:{
            turnData(formList){
                for( var i in formList){
                    let item = formList[i];
                    if(item.show === undefined)
                        item.show = true;
                    if(item.disabled === undefined)
                        item.disabled = false;
                }
            },
            //设置权限
            setAuth(){
                if(this.formList){
                    this.formList.map(item => {
                        if(typeof item.dataAuth === 'function')
                            item.dataAuth();
                    })
                }
            },
            clickSubmit(){
                this.$refs['ruleForm'].validate(val => {
                    if(val)
                        this.$emit('clickSubmit',this.getFormModel());
                })
            },
            getFormModel(){
                let workObj = {};
                for(let i in this.$refs['ruleForm'].model.formList){
                    let obj = this.$refs['ruleForm'].model.formList[i];
                    workObj[obj.prop] = obj.model
                }
                return workObj;
            },
            hiddenMsg(){
                for(let a in this.formList){
                    if(this.formList[a].disabled)
                        this.formList[a].hiddenMsg = true;
                    else
                        this.formList[a].hiddenMsg = false;
                }
            },
            selectChange(fun,val){
                if(typeof fun === 'function')
                    fun(val);
                this.setAuth();
                this.hiddenMsg();
            }
        }
    }
</script>